﻿// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var idIndex = 1;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {                
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().done(function () {
                document.getElementById("addImage").addEventListener("click", loadImage, false);
            }));
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    function loadImage(eventInfo) {

        var picker = new Windows.Storage.Pickers.FileOpenPicker();
        picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
        picker.pickSingleFileAsync().then(processResults, displayError);
    }

    function processResults(file) {

        // Check that the picker returned a file. 
        // The picker returns null if the user clicked Cancel.
        if (file) {
            var imageBlob = URL.createObjectURL(file);

            var contentHost = document.getElementById("contentHost");
            var oldContent = contentHost.innerHTML;
            var image = '<img id="imageControl' + idIndex + '" src="placeholder.png" alt="The selected image" />';
            
            WinJS.Utilities.setInnerHTMLUnsafe(contentHost, oldContent + image);
            var element = document.getElementById("imageControl" + idIndex);
            element.src = imageBlob;
            

            //document.getElementById("imageInformation").innerText =
            //"The src of the first image has been set to " + file.name;

            // Release the blob resources.
            URL.revokeObjectURL(imageBlob);

            //increase idIndex
            idIndex++;

        } else {
            displayError("An image wasn't selected.");
        }
    }

    function displayError(error) {
        if (imageBlob) {
            URL.revokeObjectURL(imageBlob);
        }
        document.getElementById("imageInformation").innerText = error;
    }


    function addImageHandler() {

    }

    app.start();
})();
